<template>
	<view class="cart _width">
		<view class="top _width" ref="top" :style="{
        height: navHeight + 20 + 'rpx',
      }">
			<view class="menuButtonheight" :style="{ height: menuButtonheight + 'rpx', top: navHeight + 'rpx' }"></view>
			<view class="titleText" :style="{
          'padding-top': navTop - 10 + 'rpx',
          'padding-left': 20 + 'rpx',
          'padding-right': navPaddingRight + 'rpx',
        }">
				<view class="left">
					<text class="label">购物车</text>
					<text class="total" v-if="cart_num > 0">（{{ cart_num }}）</text>
				</view>
				<view class="right">
					<text class="total" @click="edit">{{
            !isEdit ? "管理" : "完成"
          }}</text>
				</view>
			</view>
		</view>

		<view class="cartList _width" :style="{
        'padding-top': navHeight + menuButtonheight + 20 + 'rpx',
      }">
			<view class="nullData _width" v-if="cart_num == 0" style="background-color: #fff">
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
				<text>暂无数据</text>
			</view>

			<!-- 有效商品 -->
			<view class="inner _width" v-if="cart_num !== 0">
				<view class="for flex _width" v-for="(item, index) in tablesArr" :key="index">
					<!-- 商家信息 -->
					<view class="header flex _width">
						<view class="left">
							<radio value="1" :checked="item.selected" @click="allSelect(item)" />
						</view>
						<view class="right">
							<view class="title">
								<text>{{ item.company_name }}</text>
								<!-- <image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" /> -->
							</view>
						</view>
					</view>

					<!-- 商品信息 -->
					<view class="row flex _width" v-for="(items, indexs) in item.goods" :key="indexs">
						<view class="bottom flex _width">
							<view class="left">
								<radio :value="String(indexs)" :checked="items.selected"
									@click="checkbox(index, item, items)" />
								{{ items.text }}
							</view>
							<view class="right flex">
								<view class="cover" @click.prevent="onDetails(items.goods_id, items.sku_id)">
									<image :src="items.img" />
								</view>
								<view class="conterRight">
									<view class="topInfo flex _width"
										@click.prevent="onDetails(items.goods_id, items.sku_id)">
										<view class="title" @click="nullClick">
											<text>{{ items.goods_title }}&nbsp;{{ items.sku_name }}</text>
										</view>
										<view class="specifications" v-if="items.size">
											<text>规格: {{ items.size }}</text>
										</view>

										<view class="stock" v-if="items.disable == 1">
											<text>库存不足</text>
										</view>
									</view>
									<view class="operation flex _width">
										<!-- 没有优惠 -->
										<view class="monery" v-if="items.subsidy && items.subsidy.length == 0">
											¥{{ items.price }}
										</view>

										<!-- 有优惠 -->
										<view class="monery1" v-if="items.subsidy?.activity_id">
											<view class="col1">
												<text class="price">¥{{ items.subsidy.price }}</text>
												<text class="pricetype">到手价</text>
											</view>
											<text class="price2">¥{{ items.price }}</text>
										</view>

										<view class="editNumber flex" v-if="!isEdit">
											<u-number-box v-model="items.num" :min="1" :max="999" :name="items.id"
												@change="editNumber($event, item)" integer />
										</view>
										<view class="delete" v-else @click="deleteGoods(items.id)">
											<image
												src="https://img.zhizhuangtong.com/project_media/img/xcx/delete.png" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 无效商品 -->
			<view class="inner _width" v-if="cart_num !== 0" style="padding: 0 30rpx 30rpx">
				<view class="for flex _width" v-for="(item, index) in invalidList" :key="index">
					<!-- 商家信息 -->
					<view class="row flex _width">
						<view class="bottom flex _width">
							<view class="left">
								<radio :value="String(indexs)" :checked="item.selected" disabled />
								{{ item.text }}
							</view>

							<view class="right flex">
								<view class="cover" style="opacity: 0.6">
									<image :src="item.img" />
									<text>无效</text>
								</view>
								<view class="conterRight">
									<view class="topInfo flex _width" style="opacity: 0.6">
										<view class="title" @click="nullClick">
											<text>{{ item.goods_title }}&nbsp;{{ item.sku_name }}</text>
										</view>
										<view class="specifications" @click="nullClick">
											<text>规格: {{ item.size }}</text>
										</view>
									</view>
									<view class="operation flex _width">
										<!-- <view class="monery" style="opacity: 0.6;">
											¥{{ item.price }}
										</view> -->

										<!-- 没有优惠 -->
										<view class="monery" v-if="item.subsidy && item.subsidy.length == 0">
											¥{{ item.price }}
										</view>

										<!-- 有优惠 -->
										<view class="monery1" v-if="item.subsidy?.activity_id">
											<view class="col1">
												<text class="price">¥{{ item.subsidy.price }}</text>
												<text class="pricetype">到手价</text>
											</view>
											<text class="price2">¥{{ item.price }}</text>
										</view>

										<view class="editNumber flex" v-if="!isEdit" style="opacity: 0.6">
											<u-number-box v-model="item.num" :min="1" :max="999" disabled="true"
												integer />
										</view>
										<view class="delete" v-else @click="deleteGoods(item.id)">
											<image
												src="https://img.zhizhuangtong.com/project_media/img/xcx/delete.png" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flexBottomBtn _width" v-if="!isEdit">
				<view class="le">
					<view class="all" v-if="checkTLength !== 0">
						<radio value="1" :checked="radioValue" @click="all()" />
					</view>
					<view class="all" v-if="checkTLength !== 0">
						已选
						<text>{{ checkTLength }}</text>
						件
					</view>
				</view>

				<view class="ri">
					<view class="totalMonery" v-if="totalMonerty !== 0">
						<view class="col">
							合计：<text>¥{{ totalMonerty }}</text>
						</view>
						<text class="subsidy_money" v-if="subsidy_money">已优惠¥{{ subsidy_money }}</text>
					</view>
					<view class="pay" @click="pay"> 结算 </view>
				</view>
			</view>
		</view>

		<!-- 绑定通联手机号 -->
		<up-popup v-model:show="showModal" closeable="true">
			<view class="isphone">
				<text class="label">绑定手机号</text>
				<text class="tips">
					为保障交易正常进行，需要对您的手机号进行验证并绑定！</text>
				<view class="from">
					<view class="col">
						<text class="label">手机号：</text>
						<text class="val" v-if="!householder_phoneShow">{{ householder_phone }}</text>
						<view class="right" v-else>
							<u--input v-model="householder_phone" placeholder="" clearable maxlength="11"
								type="number"></u--input>
							<view class="getPhoneCode">
							</view>
						</view>
					</view>
					<view class="col">
						<text class="label">验证码：</text>
						<view class="right">
							<u--input v-model="code" placeholder="" clearable maxlength="6" type="number"></u--input>
							<view class="getPhoneCode" v-if="!getCodeShow" @click="getCode()">获取验证码
							</view>
							<view class="time" v-if="getCodeShow">{{ timer }}s</view>
						</view>
					</view>
				</view>

				<view class="btn">
					<button @click="bindPhone">确定</button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		checkLogin
	} from "@/utils/auth.js";
	import {
		confirm
	} from "@/api/order.js";
	import {
		getCodeRequst,
		bindTongLian
	} from "@/api/login.js";
	import {
		cart_list,
		change,
		check,
		deleteData
	} from "@/api/carts.js";
	import {
		onReachBottom,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh,
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from "vue";
	const headerTitle = "购物车";

	// 头部的高度
	const headHeight = ref("");
	// 导航栏的右边距
	const navPaddingRight = ref("");
	// 导航栏的高度
	const navHeight = ref("");
	//胶囊高度: "value",
	const menuButtonheight = ref("");
	// 导航栏距离顶部的距离
	const navTop = ref("");

	const radioValue = ref(0); //底部全选

	const isEdit = ref(false); //是否允许管理商品
	// 购物车参数
	const checkTLength = ref(""); // 选择了几件商品
	const totalMonerty = ref(""); // 选择的商品总价
	const subsidy_money = ref(""); //补贴优惠金额

	const showModal = ref(false); //是否绑定通联手机号
	const householder_phoneShow = ref(false)
	const householder_phone = ref(""); //获取的手机号
	const code = ref("");//绑定手机号的验证码
	const isQuer = ref(false);
	let timer = ref(60);
	let t = null;
	let getCodeShow = ref(false); //是否显示发送验证码

	// 支付跳转参数
	const payParams = ref({
		// ids: '',
		token: "",
		source: 1, //来源:1=购物车,2=报价单,3=直接购买
	});

	const goodsListData = ref({}); //购物车数据
	const tablesArr = ref([]); //购物车 列表
	const invalidList = ref([]); //失效的商品
	const cart_num = ref(0); //商品数量

	let selected = reactive();
	onShow(() => {
		// if (!checkLogin()) {
		//   return;
		// }
		isEdit.value = false;
		const token = uni.getStorageSync("token");
		if (!token) {
			cart_num.value = 0
			subsidy_money.value = 0
			goodsListData.value = ''
			tablesArr.value = []
			invalidList.value = ''
			totalMonerty.value = 0
			checkTLength.value = 0
		} else {
			queryGoodList(); //购物车列表
		}

	});
	onHide(() => {
		const token = uni.getStorageSync("token");
		if (!token) {
			cart_num.value = 0
			subsidy_money.value = 0
			goodsListData.value = ''
			tablesArr.value = []
			invalidList.value = ''
			totalMonerty.value = 0
			checkTLength.value = 0
		} else {
			queryGoodList(); //购物车列表
		}
		isEdit.value = false;
	});
	onMounted(() => {
		const token = uni.getStorageSync("token");
		if (!token) {
			cart_num.value = 0
			subsidy_money.value = 0
			goodsListData.value = ''
			tablesArr.value = []
			invalidList.value = ''
			totalMonerty.value = 0
			checkTLength.value = 0
		} else {
			queryGoodList(); //购物车列表
		}
		console.log("all1111");
		// 获取胶囊的位置
		const menuButtonObject = uni.getMenuButtonBoundingClientRect();
		const systemInfo = uni.getSystemInfoSync();
		// 获取系统信息
		uni.getSystemInfo({
			success: (res) => {
				// 获取状态栏的高度
				const statusBarHeight = res.statusBarHeight;
				navTop.value = menuButtonObject.top;
				navHeight.value =
					(menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
					menuButtonObject.height +
					systemInfo.statusBarHeight;
				menuButtonheight.value = menuButtonObject.height * 2;
				navPaddingRight.value = (menuButtonObject.width + 6) * 2;
				headHeight.value =
					(menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
					menuButtonObject.height +
					systemInfo.statusBarHeight;
			},
		});
		// updateSelection();
	});

	// 购无车列表
	const queryGoodList = async () => {
		const res = await cart_list();
		if (res.code === 1) {
			console.log("购物车列表", res.data);
			cart_num.value = res.data.cart_num;
			subsidy_money.value = res.data.subsidy_money;
			goodsListData.value = res.data;
			tablesArr.value = res.data.list;
			invalidList.value = res.data.invalid;
			totalMonerty.value = res.data.chose_money; // 合计
			checkTLength.value = res.data.chose_num; // 选中的数量
			let allSelected = true; // 如果全选了
			tablesArr.value.forEach((item) => {
				item.selected = false;
				let itemAllSelected = true;
				item.goods.forEach((good) => {
					good.selected = good.check === 1;
					if (!good.selected) {
						itemAllSelected = false;
						allSelected = false; // 只要有一个商品没有选中，就是未全选
					}
				});
				item.selected = itemAllSelected;
			});

			// 判断是否全选
			radioValue.value = checkTLength.value !== 0 ? 1 : 0;
		} else {
			cart_num.value = 0
			subsidy_money.value = 0
			goodsListData.value = ''
			tablesArr.value = []
			invalidList.value = ''
			totalMonerty.value = 0
			checkTLength.value = 0
		}
	};

	// 商品去详情
	const onDetails = (id, skuId) => {
		uni.navigateTo({
			url: "/pages/find/homeFurnish/index?id=" + id + "&skuId=" + skuId,
		});
	};

	// 商家的全选或反选事件
	const allSelect = (item) => {
		isEdit.value = false;

		// 切换商家的选中状态
		const newSelectedState = !item.selected;
		item.selected = newSelectedState;

		// 同步更新所有子商品的选中状态
		item.goods.forEach((goodsItem) => (goodsItem.selected = newSelectedState));

		// 处理商品数量与全选或取消逻辑
		if (checkTLength.value === 0) {
			console.log("商品取消完了");
			radioValue.value = 0;
			totalMonerty.value = 0;
		} else {
			console.log("商品手动全选了");
		}

		// 获取所有商品的 id 字符串
		const ids = item.goods.map((goodsItem) => goodsItem.id).join(",");

		// 调整 params 的 check 值
		const params = {
			ids,
			check: newSelectedState ? 1 : 0, // 根据商家的选中状态更新 check 值
		};
		// 调用选中状态更新方法
		changeCheck(params);
	};

	// 单独商品的勾选事件
	const checkbox = (index, item, items) => {
		isEdit.value = false; //重置 管理和删除
		// 切换该商品的选中状态
		items.selected = !items.selected;
		const params = {
			ids: items.id,
			check: items.check == 0 ? 1 : 0,
		};
		changeCheck(params); //选中状态
	};

	// 记录选中状态
	const changeCheck = async (params) => {
		const res = await check(params);
		if (res.code === 1) {
			queryGoodList();
		} else {
			uni.showToast({
				icon: "none",
				title: res.msg,
			});
			console.log("resresres", res);
		}
	};

	//修改商品数量
	const editNumber = async (val, item) => {
		isEdit.value = false;
		const clickedId = val.name;
		const selectedGoods = item.goods.find((item) => item.id === clickedId);
		const params = {
			// check: selectedGoods.check,
			id: val.name,
			num: val.value,
		};
		changeNumberCheck(params); //修改数量
	};

	// 记录修改数量
	const changeNumberCheck = async (params) => {
		const res = await change(params);
		if (res.code === 1) {
			console.log("resresres", res);
			// 修改数量成功，提示后刷新列表
			uni.showToast({
				icon: "none",
				title: "修改数量成功",
				success: () => {
					setTimeout(() => {
						queryGoodList(); // 刷新列表
					}, 500);
				},
			});
		} else {
			// 提示错误信息后刷新列表
			uni.showToast({
				icon: "none",
				title: res.msg,
				success: () => {
					setTimeout(() => {
						queryGoodList(); // 刷新列表
					}, 500);
				},
			});
			console.log("resresres", res);
		}
	};

	//商品删除
	const deleteGoods = async (ids) => {
		const params = {
			ids: ids,
		};
		try {
			const res = await deleteData(params);
			if (res.code === 1) {
				console.log("resresres", res);
				uni.showToast({
					icon: "none",
					title: "删除成功",
					success: () => {
						setTimeout(() => {
							queryGoodList();
						}, 500);
					},
				});
				// queryGoodList()
				// setTimeout(() => {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '删除成功'
				// 	})
				// }, 100);
			} else {
				uni.showToast({
					icon: "none",
					title: res.msg,
				});
				console.log("resresres", res);
			}
		} catch (error) {
			console.error(error);
		}
	};

	// 最外层全选
	const all = () => {
		isEdit.value = false;
		// 判断是否全选
		const allSelected = tablesArr.value.every((items) =>
			items.goods.every((child) => child.selected)
		);

		// 更新每个商家的选中状态以及该商家下商品的选中状态
		tablesArr.value.forEach((items) => {
			items.selected = !allSelected; // 设置商家的选中状态
			items.goods.forEach((child) => {
				child.selected = !allSelected; // 设置每个商品的选中状态
			});
		});

		// 如果没有商品被选中，取消 radio 的选中状态
		if (
			tablesArr.value.every((items) =>
				items.goods.every((child) => !child.selected)
			)
		) {
			radioValue.value = 0; // 如果没有商品被选中
		} else {
			radioValue.value = 1; // 有商品被选中时默认选中
		}

		const allIds = tablesArr.value
			.flatMap((item) => item.goods.map((goodsItem) => goodsItem.id))
			.join(", ");
		const params = {
			ids: allIds,
			check: radioValue.value,
		};
		changeCheck(params); //选中状态
	};

	//购物车管理
	const edit = () => {
		isEdit.value = !isEdit.value;
	};

	// 去结算
	const pay = () => {
		const token = uni.getStorageSync("token");
		const useInfo = uni.getStorageSync("useInfo");
		if (token) {
		  if (useInfo && useInfo.allin_mobile == 1) {
		    goPay();
		  } else {
		    uni.showToast({
		      icon: "none",
		      title: "请先绑定手机号",
		    });
		    clear();
		    householder_phone.value = useInfo.phone;
			householder_phoneShow.value = householder_phone.value=='' ? true:false
		    code.value = "";
		    showModal.value = true;
		  }
		}
	};

	//获取验证码
	const getCode = async (phone) => {
		// 手机号格式验证
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (!phoneRegex.test(householder_phone.value)) {
			uni.showToast({
				icon: "none",
				title: "请输入正确的手机号",
			});
			return;
		} else {
			let res = await getCodeRequst({
				phone: householder_phone.value,
				scene: "3",
				extend: uni.getStorageSync("useInfo").user_id
			});
			uni.showToast({
				icon: "none",
				title: res.msg,
			});
			if (res.code == 1) {
				isQuer.value = true;

				getCodeShow.value = true;
				if (t) clear();
				t = setInterval(() => {
					timer.value--;
					if (timer.value === 0) clear();
				}, 1000);
			} else {
				isQuer.value = false;
				getCodeShow.value = false;
			}
		}
	};

	const clear = () => {
		clearInterval(t);
		timer.value = 60;
		getCodeShow.value = false;
		t = null;
	};

	// 关闭
	const close = () => {
		clear();
		showModal.value = false;
	};

	// 绑定手机号
	const bindPhone = async () => {
		console.log("isQuer.value", isQuer.value);
		if (householder_phone.value == '') {
		    uni.showToast({
		      icon: "none",
		      title: "请先填写手机号",
		    });
			return
		  } else {
			if (isQuer.value == false) {
				uni.showToast({
					icon: "none",
					title: "请先发送验证码",
				});
				return;
			} else {
				let obj = {
					code:code.value,
					phone: householder_phone.value
				}
				const res = await bindTongLian(obj)
				if (res.code == 0) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				} else {
					uni.setStorageSync('token', res.data.userinfo.token)
					uni.setStorageSync('useInfo', res.data.userinfo)
					showModal.value = false;
					clear();
					isQuer.value = false;
					goPay();
				}
			}
		}
	};

	//去支付
	const goPay = async () => {
		// 已登录
		const token = uni.getStorageSync("token");
		if (token) {
			if (checkTLength.value == 0) {
				uni.showToast({
					icon: "none",
					title: "请先选择商品",
				});
				return;
			} else {
				payParams.value.token = token;
				// payParams.value.ids = checkedIds //勾选的商品id
				uni.setStorageSync("payParams", ""); //清空之前才储存的支付参数
				uni.setStorageSync("payParams", payParams.value);
				// const checkedIds = tablesArr.value.flatMap(company => company.goods).filter(good => good.check === 1)
				// 	.map(good => good.id).join(',');
				// console.log('支付参数',payParams.value,checkedIds)
				const params = {
					channel: 4,
					token: payParams.value.token,
					source: payParams.value.source,
					address_id: 0, //地址id,不传使用默认地址
					remarks: "", //备注,key=企业id,value=备注信息
					send_type: 1, //配送方式,key=企业id,value=配送方式:1=商家配送,2=自提
					pay_channel: 1, //支付方式,1=在线支付
					invoice_type: "", //发票,默认0:0=不开票,1=个人,2=企业
				};
				// 订单预览
				const resData = await confirm(params);
				if (resData.code === 1) {
					uni.navigateTo({
						url: "/pages/order/confirmOrder/index",
					});
				} else {
					console.log("失败");
					// uni.navigateBack()
					uni.showToast({
						icon: "none",
						title: resData.msg,
					});
				}
			}
		} else {
			// 请登录
			// ElMessage.warning('请登录账号')
			// login_register.value.open(1)
		}
	};
</script>

<style lang="less" scoped>
	.cart {
		.top {
			width: 100%;
			// backdrop-filter: blur(10px) !important;
			// background-color: rgba(255, 255, 255, 0.75) !important;
			background-color: #fff;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			z-index: 12;

			.titleText {
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-sizing: border-box;

				.left {
					align-items: flex-end;
					justify-content: flex-start;

					.label {
						height: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 34rpx;
						color: #2f2f2f;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}

					.total {
						margin-left: 5rpx;
						height: 100%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}

				.right {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-right: 10rpx;
				}
			}
		}

		.cartList {
			width: 100%;
			min-height: 100vh;
			padding-bottom: 130rpx;
			position: absolute;
			z-index: 1;
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			// background-color: #fff;
			background-color: #f3f3f3;

			.nullData {
				min-height: calc(100vh - 180rpx);
			}

			.inner {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 30rpx 30rpx;
				height: 100%;
				box-sizing: border-box;
				background-color: #f3f3f3;

				.for {
					flex-wrap: wrap;
					padding: 20rpx 10rpx;
					background: #ffffff;
					border-radius: 18rpx 18rpx 18rpx 18rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					// box-shadow: 0 5rpx 8rpx 0 rgba(0, 0, 0, .08);

					// 商家信息
					.header {
						width: 100%;
						margin-bottom: 24rpx;
						align-items: center;

						.left {
							width: 60rpx;
							display: flex;
							justify-content: center;
						}

						.right {
							width: calc(100% - 60rpx);
						}

						.title {
							// padding-left: 10rpx;
							width: 100%;
							display: flex;
							align-items: center;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							word-wrap: break-word;
							word-break: break-all;
							box-sizing: border-box;

							text {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							image {
								width: 15rpx;
								height: 20rpx;
								margin-left: 10rpx;
							}
						}
					}

					// 商品信息
					.row {
						flex-wrap: wrap;
						margin-bottom: 40rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.bottom {
							.left {
								display: flex;
								align-items: center;
								width: 60rpx;
								justify-content: center;
							}

							.right {
								width: calc(100% - 60rpx);

								.title {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #333333;
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;

									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}

								.cover {
									width: 170rpx;
									height: 170rpx;
									border-radius: 10rpx 10rpx 10rpx 10rpx;
									background-color: #f3f3f3;
									box-sizing: border-box;
									position: relative;
									overflow: hidden;

									text {
										background-color: rgba(0, 0, 0, 0.6);
										position: absolute;
										left: 0;
										top: 0;
										z-index: 2;
										width: 100%;
										height: 100%;
										display: flex;
										align-items: center;
										justify-content: center;
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: 26rpx;
										color: #ffffff;
										font-style: normal;
										text-transform: none;
									}
								}

								.conterRight {
									display: flex;
									flex-wrap: wrap;
									align-content: space-between;
									width: calc(100% - 170rpx);
									padding: 0 10rpx 0 20rpx;
									box-sizing: border-box;

									.topInfo {
										align-items: flex-start;
										flex-wrap: wrap;

										.title {
											width: 100%;
											height: 30rpx;
											line-height: 30rpx;
											display: -webkit-box;
											-webkit-box-orient: vertical;
											-webkit-line-clamp: 1;
											overflow: hidden;
											word-wrap: break-word;
											word-break: break-all;
										}

										.specifications {
											width: 100%;
											font-family: PingFang SC, PingFang SC;
											font-weight: 400;
											font-size: 24rpx;
											color: #999999;
											height: 26rpx;
											line-height: 26rpx;
											margin-top: 15rpx;
											text-align: left;
											font-style: normal;
											text-transform: none;
										}

										.stock {
											width: 100%;
											font-family: PingFang SC, PingFang SC;
											font-weight: 400;
											font-size: 24rpx;
											color: #ef4040;
											height: 26rpx;
											line-height: 26rpx;
											margin-top: 15rpx;
											text-align: left;
											font-style: normal;
											text-transform: none;
										}
									}

									// 操作
									.operation {
										// height: 50rpx;
										display: flex;
										align-items: center;
										justify-content: space-between;

										.monery1 {
											width: calc(100% - 160rpx);
											display: flex;
											flex-wrap: wrap;
											align-items: center;

											.col1 {
												width: 100%;
												display: flex;

												.price {
													font-family: PingFang SC, PingFang SC;
													font-weight: 500;
													font-size: 34rpx;
													color: #df3033;
													line-height: 36rpx;
													font-style: normal;
													text-transform: none;
													display: -webkit-box;
													-webkit-box-orient: vertical;
													-webkit-line-clamp: 1;
													overflow: hidden;
												}

												.pricetype {
													min-width: 70rpx;
													flex: 1;
													font-family: PingFang SC, PingFang SC;
													font-weight: 400;
													font-size: 24rpx;
													color: #df3033;
													line-height: 36rpx;
													text-align: left;
													font-style: normal;
													text-transform: none;
													margin-left: 5rpx;
												}
											}

											.price2 {
												font-family: PingFang SC, PingFang SC;
												font-weight: 400;
												font-size: 24rpx;
												color: #8e8e8e;
												line-height: 36rpx;
												text-align: left;
												font-style: normal;
												text-decoration-line: line-through;
												text-transform: none;
											}
										}

										.monery {
											font-family: Source Han Sans CN, Source Han Sans CN;
											font-weight: 500;
											font-size: 30rpx;
											color: #333333;
											line-height: 36rpx;
											text-align: left;
											font-style: normal;
											text-transform: none;
										}

										.editNumber {
											width: 150rpx;
											height: 50rpx;
											align-items: center;
											border-radius: 10rpx;
											border: 1px solid #eee9e9;
											box-sizing: border-box;

											::v-deep .u-number-box {
												display: flex;
												box-sizing: border-box;
											}

											::v-deep .u-number-box__minus,
											::v-deep .u-number-box__plus {
												padding: 5rpx;
												background-color: transparent !important;
												box-sizing: border-box;
												height: 30rpx !important;
												width: 35rpx;

												text {
													font-size: 16rpx !important;
												}
											}

											::v-deep .u-number-box__input {
												background-color: transparent !important;
												height: 30rpx !important;
												width: 35rpx;
												border-left: 1rpx solid #eee9e9;
												border-right: 1rpx solid #eee9e9;
											}
										}

										.delete {
											display: flex;
											justify-content: center;
											align-items: center;
											width: 50rpx;
											height: 50rpx;
											background: #fd1c2e;
											border-radius: 8rpx 8rpx 8rpx 8rpx;

											image {
												width: 30rpx;
												height: 30rpx;
											}
										}
									}
								}
							}
						}
					}
				}
			}

			// 底部股东导航
			.flexBottomBtn {
				padding: 0 30rpx;
				backdrop-filter: blur(10px) !important;
				background-color: rgba(255, 255, 255, 0.75) !important;
				transition: 0.3s;
				box-shadow: 20rpx 20rpx 40rpx 0 rgba(0, 0, 0, 0.2);
				width: 100%;
				height: 100rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: space-between;

				box-sizing: border-box;

				.le {
					height: 100%;
					display: flex;
					align-items: center;
					min-width: 190rpx;

					.all {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;

						text {
							color: #333333;
							font-size: 26rpx;
						}
					}
				}

				.ri {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.totalMonery {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-right: 10rpx;
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-end;
						align-content: center;

						.col {
							width: 100%;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
							text-transform: none;
							text-align: right;

							text {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 34rpx;
								color: #e42f2f;
								line-height: 34rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

						.subsidy_money {
							width: 100%;
							display: flex;
							justify-content: flex-end;

							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 22rpx;
							color: #666666;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					.pay {
						width: 220rpx;
						height: 80rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #ffffff;
						line-height: 80rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						background: linear-gradient(115deg, #f2bd6f 0%, #cca05f 100%);
						border-radius: 20rpx;
					}
				}
			}
		}

		.isphone {
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			// padding: 30rpx 30rpx 45rpx;
			background-image: url(https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/telBj%402x.png);
			background-repeat: no-repeat;
			background-size: 100%;
			height: auto;

			.label {
				display: block;
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #2f2f2f;
				text-align: left;
				font-style: normal;
				text-transform: none;
				line-height: 80rpx;
				height: 80rpx;
				box-sizing: border-box;
			}

			.tips {
				display: block;
				width: 100%;
				line-height: 40rpx;
				margin: 20rpx 0;
				box-sizing: border-box;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.from {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;
				box-sizing: border-box;

				.col {
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.label {
						width: 130rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						height: 100%;
						font-size: 28rpx;
						color: #333333;
						display: flex;
						align-items: center;
						text-align: left;
						font-style: normal;
					}

					.right {
						flex: 1;
						height: 100%;
						display: flex;

						.getPhoneCode {
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							width: 150rpx;
							height: 100%;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333;
							font-style: normal;
						}

						.time {
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							width: 150rpx;
							height: 100%;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #cca05f;
							font-style: normal;
						}
					}

					.val {
						flex: 1;
					}
				}
			}

			.btn {
				width: 100%;
				padding: 0 30rpx;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				margin-top: 40rpx;

				button {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(138deg, #eda55b 0%, #d09a47 100%);
					border-radius: 14rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 88rpx;
					font-style: normal;
				}
			}
		}
	}
</style>